<template>
  <div class="table-list w-full h-full">
    <div class="flex items-center mb-2">
      <div class="flex items-center bg-blue-50/60 rounded-lg py-0.5 px-2">
        <i class="iconfont icon-icon-transfer text-[#215aff] text-base"/>
        <span class="title font-semibold text-[#215aff] ml-1.5">分步调拨实时数据</span>
      </div>
      <div class="flex-1 h-[1px] bg-gradient-to-r from-[#9aafef]/80 via-[#9aafef]/50 to-transparent ml-3"></div>
    </div>
    <el-scrollbar
      ref="scrollbarRef"
      class="custom-scrollbar-container"
      @scroll="handleScroll"
      :style="{ height: 'calc(88% - 10px)', border: '1px solid #f2f3f8' }"
    >
      <div
        ref="scrollContent"
        class="scroll-content px-3 py-3"
      >
        <div
          class="scroll-wrapper"
          @mouseenter.stop="handleMouseEnter"
          @mouseleave.stop="handleMouseLeave"
        >
          <div class="scroll-list-container" :class="{ 'paused': isHovering }">
            <div class="scroll-list">
              <list-card-item
                v-for="(item,index) in tableData"
                :key="'copy-'+index"
                :item="item"
                :tableTitle="tableTitle"
              />
            </div>
          </div>
        </div>
      </div>
      <el-empty class="w-full h-full" :image-size="150" v-if="!tableData.length" />
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import listCardItem from './listCardItem.vue'
import { getRealtimeDataStep } from '@/api/warehouseEntryApi'
import { ElScrollbar } from 'element-plus'

const tableTitle = ref([
  {
    key: 'docNo',
    label: '调出单据号'
  },
  {
    key: 'docDate',
    label: '调出日期'
  },
  {
    key: 'materialCode',
    label: '物料编码'
  },
  {
    key: 'qty',
    label: '数量'
  },
  {
    key: 'instockCode',
    label: '调入单号'
  },
  {
    key: 'docDate1',
    label: '调入日期'
  }
])

const tableData = ref([])
const scrollbarRef = ref(null)
const scrollContent = ref(null)
const isHovering = ref(false)

let dataInterval = null


const getNumObj = async () => {
  try {
    const { data } = await getRealtimeDataStep({
      docNo: "",
      docNo1: ""
    })
    tableData.value = data
    resetScroll()
  } catch (e) {
    console.log(e)
  }
}

const startDataRefresh = () => {
  if (dataInterval) clearInterval(dataInterval)
  dataInterval = setInterval(() => {
    getNumObj()
  }, 5000)
}

const resetScroll = () => {
  if (scrollbarRef.value) {
    scrollbarRef.value.setScrollTop(0)
  }
}

const handleMouseEnter = (e) => {
  e.preventDefault()
  isHovering.value = true
  console.log('mouse enter')
}

const handleMouseLeave = (e) => {
  e.preventDefault()
  isHovering.value = false
  console.log('mouse leave')
}

const handleScroll = () => {
  // 可以在这里添加额外的滚动处理逻辑
  if(tableData.value.length === 0) return
}

onMounted(() => {
  getNumObj()
  startDataRefresh()
})

onUnmounted(() => {
  if (dataInterval) clearInterval(dataInterval)
})
</script>

<style scoped lang="scss">
.custom-scrollbar-container {
  :deep(.el-scrollbar__bar.is-vertical) {
    width: 6px;
    opacity: 0;
    transition: opacity 0.1s;

    .el-scrollbar__thumb {
      background-color: rgba(33, 90, 255, 0.3);
      &:hover {
        background-color: rgba(33, 90, 255, 0.5);
      }
      &:active {
        background-color: rgba(33, 90, 255, 0.7);
      }
    }
  }

  &:hover {
    :deep(.el-scrollbar__bar.is-vertical) {
      opacity: 1;
    }
  }
}

.scroll-content {
  position: relative;
  overflow: hidden;
}

.scroll-wrapper {
  position: relative;
  z-index: 1;
}

.scroll-list-container {
  animation: scrollAnimation 50s linear infinite;

  &.paused {
    animation-play-state: paused;
  }
}

.scroll-list {
  &:last-child {
    margin-top: 20px;
  }
}

@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

:deep(.el-scrollbar__wrap) {
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  &::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
  }
}
</style>
